//渲染数据
.box{
    width:100%;
    height: 800px;
    margin-top: 20px;
    .center{
        height:100%;
        .page-list{
            width: 1200px;
            height:100%;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 285px;
                height: 387px;
                margin-top: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-left: 12px;
                background-color: #fff;
                .pic{
                    width:280px;
                    height:250px;
                    img{
                        width:250px;
                        height:250px;
                       }
                }
                   .brief{
                    width: 180px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #b0b0b0;
                    margin-top: 10px;
                    display: -webkit-box;
                    display: -moz-box;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:1;   /*显示行数*/      
                   }
                   .name{
                   width: 180px;
                   height:20px;
                   font-size: 16px;
                   display: -webkit-box;
                   display: -moz-box;
                   white-space: pre-wrap;
                   word-wrap: break-word;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   -webkit-box-orient: vertical;
                   -webkit-line-clamp:2;   
                   }
                   .price{
                    color:red;
                    margin-top: 10px;
                    font-weight: bold;
                    font-size: 18px;
                   }
                   button{
                    border:none;
                    color: #fff;
                    font-size: 16px;
                    background-color: red;
                    margin-top: 10px;
                    &:hover{
                        cursor: pointer;
                    }
                   }
                   a{
                    &:hover{
                        color: black;
                    }
                   }
            }
        }
    }

}
#sidebar{
    width:80px;
    height: 272px;
    border:0px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: fixed;
    right:16px;
    bottom: 32px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 10%) 0px 2px 6px;
    z-index:100;
  
    div{
       width:80px;
       height:56px;
       a{
        &:hover{
            color:red;
        }
       }
       div{
        width:80px;
        height:40px;
        text-align: center;
        span{
            font-size:30px ;
           }
       }
       p{
        width: 80px;
        height: 16px;
        text-align: center;
       }
       .head{
        position: relative;
       }
      
       .span{
            width: 20px;
            height: 15px;
            border:0px solid;
            border-radius: 50px;
            background-color: red;
            color: #fff;
            position: absolute;
            top: 17px;
            right:12px;
        }
    }
}
